import { init, dispose, registerIndicator } from 'klinecharts'
import { useEffect } from "react"


function genData(timestamp = new Date().getTime(), length = 1000) {
    let basePrice = 5000
    timestamp = Math.floor(timestamp / 1000 / 60) * 60 * 1000 - length * 60 * 1000
    const dataList: any = []
    for (let i = 0; i < length; i++) {
        const prices: any = []
        for (let j = 0; j < 4; j++) {
            prices.push(basePrice + Math.random() * 60 - 30)
        }
        prices.sort()
        const open = +(prices[Math.round(Math.random() * 3)].toFixed(2))
        const high = +(prices[3].toFixed(2))
        const low = +(prices[0].toFixed(2))
        const close = +(prices[Math.round(Math.random() * 3)].toFixed(2))
        const volume = Math.round(Math.random() * 100) + 10
        const turnover = (open + high + low + close) / 4 * volume
        dataList.push({ timestamp, open, high, low, close, volume, turnover })

        basePrice = close
        timestamp += 60 * 1000
    }
    return dataList
}

const Detail = () => {

    useEffect(() => {
        const handler = (e) => {
            // 在这里你可以添加更多的逻辑来决定何时阻止默认行为
            e.preventDefault();
        };

        document.addEventListener('touchstart', handler, { passive: false });
        document.addEventListener('touchmove', handler, { passive: false });

        return () => {
            document.removeEventListener('touchstart', handler);
            document.removeEventListener('touchmove', handler);
        };
    }, []);

    useEffect(() => {

        registerIndicator({
            name: 'MA',
            shortName: 'MA',
            calcParams: [1, 100, 1000],
            figures: [
                { key: 'ma0', title: 'MA1: ', type: 'line' },
                { key: 'ma1', title: 'MA100: ', type: 'line' },
                { key: 'ma2', title: 'MA1000: ', type: 'line' }
            ],
            // 当计算参数改变时，希望提示的和参数一样，即title的值需要改变
            regenerateFigures: (params) => {
                return params.map((p, i) => {
                    return { key: `ma${i + 1}`, title: `MA${p}: `, type: 'line' }
                })
            },
            // 计算结果
            calc: (kLineDataList, { calcParams, figures }) => {
                // 注意：返回数据个数需要和kLineDataList的数据个数一致，如果无值，用{}代替即可。
                // 计算参数最好取回调参数calcParams，如果不是，后续计算参数发生变化的时候，这里计算不能及时响应
                const closeSums: any = []
                return kLineDataList.map((kLineData, i) => {
                    const ma = {}
                    const close = kLineData.close
                    calcParams.forEach((param, j) => {
                        closeSums[j] = (closeSums[j] || 0) + close
                        if (i >= param - 1) {
                            ma[figures[j].key] = closeSums[j] / param
                            closeSums[j] -= kLineDataList[i - (param - 1)].close
                        }
                    })
                    // 如果有值的情况下，这里每一项的数据格式应该是 { ma1: xxx, ma2: xxx }
                    // 每个key需要和figures中的子项key对应的值一致
                    return ma
                })
            }
        })
        // 初始化图表
        const chart: any = init('chart')
        chart.setOffsetRightDistance(10)
        chart.setMaxOffsetLeftDistance(10)
        chart.setBarSpace(16)
        chart.setLeftMinVisibleBarCount(25)
        chart.createIndicator('MA', false, { id: 'candle_pane' })
        chart.createIndicator('VOL');
        chart.createIndicator("MACD");


        chart.setStyles({
            // 网格线
            grid: {
                show: true,
                horizontal: {
                    show: true,
                    size: 3,
                    color: 'rgb(3 7 18)',
                    style: 'soild',
                    dashedValue: [2, 2]
                },
                vertical: {
                    show: true,
                    size: 3,
                    color: 'rgb(3 7 18)',
                    style: 'soild',
                    dashedValue: [2, 2]
                }
            },
            // 蜡烛图
            candle: {
                // 注释 分时图 area  ，其他用这个 candle_solid
                // 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
                type: 'candle_solid',
                // 面积图
                area: {
                    lineSize: 2,
                    lineColor: '#2196F3',
                    value: 'close',
                    backgroundColor: [{
                        offset: 0,
                        color: 'rgba(33, 150, 243, 0.01)'
                    }, {
                        offset: 1,
                        color: 'rgba(33, 150, 243, 0.2)'
                    }]
                },
                priceMark: {
                    show: true,
                    // 最高价标记
                    high: {
                        show: true,
                        color: 'red',
                        textOffset: 5,
                        textSize: 12,
                        textFamily: 'Helvetica Neue',
                        textWeight: 'normal'
                    },
                    // 最低价标记
                    low: {
                        show: true,
                        color: 'green',
                        textOffset: 5,
                        textSize: 12,
                        textFamily: 'Helvetica Neue',
                        textWeight: 'normal',
                    },
                    // 最新价标记
                    last: {
                        show: false,
                    }
                },
                // 提示
                tooltip: {
                    // 'always' | 'follow_cross' | 'none'
                    showRule: 'none',
                    icons: []
                }
            },
            // 技术指标
            indicator: {
                ohlc: {
                    upColor: 'rgba(45, 192, 142, .7)',
                    downColor: 'rgba(249, 40, 85, .7)',
                    noChangeColor: '#888888'
                },
                bars: [{
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderSize: 1,
                    borderDashedValue: [2, 2],
                    upColor: 'rgba(45, 192, 142, .7)',
                    downColor: 'rgba(249, 40, 85, .7)',
                    noChangeColor: '#888888'
                }],
                lines: [
                    {
                        // 'solid' | 'dashed'
                        style: 'solid',
                        smooth: false,
                        size: 1,
                        dashedValue: [2, 2],
                        color: '#FF9600'
                    }, {
                        style: 'solid',
                        smooth: false,
                        size: 1,
                        dashedValue: [2, 2],
                        color: '#935EBD'
                    }, {
                        style: 'solid',
                        smooth: false,
                        size: 1,
                        dashedValue: [2, 2],
                        color: '#2196F3'
                    }, {
                        style: 'solid',
                        smooth: false,
                        size: 1,
                        dashedValue: [2, 2],
                        color: '#E11D74'
                    }, {
                        style: 'solid',
                        smooth: false,
                        size: 1,
                        dashedValue: [2, 2],
                        color: '#01C5C4'
                    }
                ],
                circles: [{
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderSize: 1,
                    borderDashedValue: [2, 2],
                    upColor: 'rgba(45, 192, 142, .7)',
                    downColor: 'rgba(249, 40, 85, .7)',
                    noChangeColor: '#888888'
                }],
                // 最新值标记
                lastValueMark: {
                    show: false,
                    text: {
                        show: false,
                        // 'fill' | 'stroke' | 'stroke_fill'
                        style: 'fill',
                        color: '#FFFFFF',
                        size: 12,
                        family: 'Helvetica Neue',
                        weight: 'normal',
                        // 'solid' | 'dashed'
                        borderStyle: 'solid',
                        borderSize: 1,
                        borderDashedValue: [2, 2],
                        paddingLeft: 4,
                        paddingTop: 4,
                        paddingRight: 4,
                        paddingBottom: 4,
                        borderRadius: 2
                    }
                },
                // 提示
                tooltip: {
                    // 'always' | 'follow_cross' | 'none'
                    showRule: 'always',
                    // 'standard' | 'rect'
                    showType: 'standard',
                    showName: true,
                    showParams: true,
                    defaultValue: 'n/a',
                    text: {
                        size: 12,
                        family: 'Helvetica Neue',
                        weight: 'normal',
                        color: '#D9D9D9',
                        marginTop: 8,
                        marginRight: 10,
                        marginBottom: 0,
                        marginLeft: 6
                    },

                    icons: []
                }
            },
            // x轴
            xAxis: {
                show: true,
                size: 'auto',
                // x轴线
                axisLine: {
                    show: false,
                    color: '#888888',
                    size: 1
                },
                // x轴分割文字
                tickText: {
                    show: true,
                    color: 'rgb(107 114 128)',
                    family: 'Helvetica Neue',
                    weight: 'normal',
                    size: 12,
                    marginStart: 4,
                    marginEnd: 4
                },
                // x轴分割线
                tickLine: {
                    show: true,
                    size: 1,
                    length: 3,
                    color: '#888888'
                }
            },
            // y轴
            yAxis: {
                show: true,
                size: 'auto',
                // 'left' | 'right'
                position: 'right',
                // 'normal' | 'percentage' | 'log'
                type: 'normal',
                inside: true,
                reverse: false,
                // y轴线
                axisLine: {
                    show: false,
                    color: '#888888',
                    size: 1
                },
                // x轴分割文字
                tickText: {
                    show: true,
                    color: 'rgb(107 114 128)',
                    family: 'Helvetica Neue',
                    weight: 'normal',
                    size: 12,
                    marginStart: 4,
                    marginEnd: 4
                },
                // x轴分割线
                tickLine: {
                    show: true,
                    size: 1,
                    length: 3,
                    color: '#888888'
                }
            },
            // 图表之间的分割线
            separator: {
                size: 0,
                color: '#888888',
                fill: true,
                activeBackgroundColor: 'rgba(230, 230, 230, .15)'
            },
            // 十字光标
            crosshair: {
                show: true,
                // 十字光标水平线及文字
                horizontal: {
                    show: true,
                    line: {
                        show: true,
                        // 'solid'|'dashed'
                        style: 'dashed',
                        dashedValue: [4, 2],
                        size: 1,
                        color: '#888888'
                    },
                    text: {
                        show: true,
                        // 'fill' | 'stroke' | 'stroke_fill'
                        style: 'fill',
                        color: '#FFFFFF',
                        size: 12,
                        family: 'Helvetica Neue',
                        weight: 'normal',
                        // 'solid' | 'dashed'
                        borderStyle: 'solid',
                        borderDashedValue: [2, 2],
                        borderSize: 1,
                        borderColor: '#686D76',
                        borderRadius: 2,
                        paddingLeft: 4,
                        paddingRight: 4,
                        paddingTop: 4,
                        paddingBottom: 4,
                        backgroundColor: '#686D76'
                    }
                },
                // 十字光标垂直线及文字
                vertical: {
                    show: true,
                    line: {
                        show: true,
                        // 'solid'|'dashed'
                        style: 'dashed',
                        dashedValue: [4, 2],
                        size: 1,
                        color: '#888888'
                    },
                    text: {
                        show: true,
                        // 'fill' | 'stroke' | 'stroke_fill'
                        style: 'fill',
                        color: '#FFFFFF',
                        size: 12,
                        family: 'Helvetica Neue',
                        weight: 'normal',
                        // 'solid' | 'dashed'
                        borderStyle: 'solid',
                        borderDashedValue: [2, 2],
                        borderSize: 1,
                        borderColor: '#686D76',
                        borderRadius: 2,
                        paddingLeft: 4,
                        paddingRight: 4,
                        paddingTop: 4,
                        paddingBottom: 4,
                        backgroundColor: '#686D76'
                    }
                }
            },
            // 覆盖物
            overlay: {
                point: {
                    color: '#1677FF',
                    borderColor: 'rgba(22, 119, 255, 0.35)',
                    borderSize: 1,
                    radius: 5,
                    activeColor: '#1677FF',
                    activeBorderColor: 'rgba(22, 119, 255, 0.35)',
                    activeBorderSize: 3,
                    activeRadius: 5
                },
                line: {
                    // 'solid' | 'dashed'
                    style: 'solid',
                    smooth: false,
                    color: '#1677FF',
                    size: 1,
                    dashedValue: [2, 2]
                },
                rect: {
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    color: 'rgba(22, 119, 255, 0.25)',
                    borderColor: '#1677FF',
                    borderSize: 1,
                    borderRadius: 0,
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderDashedValue: [2, 2]
                },
                polygon: {
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    color: '#1677FF',
                    borderColor: '#1677FF',
                    borderSize: 1,
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderDashedValue: [2, 2]
                },
                circle: {
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    color: 'rgba(22, 119, 255, 0.25)',
                    borderColor: '#1677FF',
                    borderSize: 1,
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderDashedValue: [2, 2]
                },
                arc: {
                    // 'solid' | 'dashed'
                    style: 'solid',
                    color: '#1677FF',
                    size: 1,
                    dashedValue: [2, 2]
                },
                text: {
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    color: '#FFFFFF',
                    size: 12,
                    family: 'Helvetica Neue',
                    weight: 'normal',
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderDashedValue: [2, 2],
                    borderSize: 0,
                    borderRadius: 2,
                    borderColor: '#1677FF',
                    paddingLeft: 0,
                    paddingRight: 0,
                    paddingTop: 0,
                    paddingBottom: 0,
                    backgroundColor: 'transparent'
                },
                rectText: {
                    // 'fill' | 'stroke' | 'stroke_fill'
                    style: 'fill',
                    color: '#FFFFFF',
                    size: 12,
                    family: 'Helvetica Neue',
                    weight: 'normal',
                    // 'solid' | 'dashed'
                    borderStyle: 'solid',
                    borderDashedValue: [2, 2],
                    borderSize: 1,
                    borderRadius: 2,
                    borderColor: '#1677FF',
                    paddingLeft: 4,
                    paddingRight: 4,
                    paddingTop: 4,
                    paddingBottom: 4,
                    backgroundColor: '#1677FF'
                }
            }
        });

        // 为图表添加数据
        chart.applyNewData(genData())

        return () => {
            // 销毁图表
            dispose('chart')
        }
    }, [])



    return (
        <div id="chart" className="w-full h-[800px]" />
    )
}

export default Detail
